export function mobius(id) {
    let r = 255,
        g = 0,
        b = 0,
        phase = 0;

    const timer = setInterval(() => {
        const piths = document.querySelectorAll(`${id} .pith`);
        if (piths.length == 0) {
            mobiusClear(timer);
        }

        if (phase === 0) {
            g += 3;
            if (g === 255) phase = 1;
        } else if (phase === 1) {
            r -= 3;
            if (r === 0) phase = 2;
        } else if (phase === 2) {
            b += 3;
            if (b === 255) phase = 3;
        } else if (phase === 3) {
            g -= 3;
            if (g === 0) phase = 4;
        } else if (phase === 4) {
            r += 3;
            if (r === 255) phase = 5;
        } else if (phase === 5) {
            b -= 3;
            if (b === 0) phase = 0;
        }

        for (const pith of piths) {
            pith.style.background = `conic-gradient(transparent 65%, rgb(${r}, ${g}, ${b}))`;
        }
    }, 1);

    return timer;
}

export function mobiusClear(timer) {
    try {
        clearInterval(timer);
    } catch (error) {
        console.error(error);
    }
}
